<template>
  <div>
    <div>
      <!--    搜索框-->
      <el-input v-model="search" class="input-with-select" placeholder="请输入内容" style="float: left;width: 20%"
                @keyup.enter.native="searchClick">
        <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
      </el-input>
      <el-button
        :disabled="debuilds.length === 0"
        icon="el-icon-delete"
        style="float:left;"
        type="danger"
        @click="alldeBuild">
        一键删除
      </el-button>
      <!--    数据表格-->
      <el-table
        v-loading="loading"
        :data="dormitorys.records"
        border
        empty-text="无"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-spinner="el-icon-loading"
        @selection-change="changeBox"
        element-loading-text="拼命加载中"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          align="center"
          label="Id"
          prop="dormitoryId">
        </el-table-column>
        <el-table-column
          align="center"
          label="楼栋号"
          prop="buildName"
          width="70">

        </el-table-column>
        <el-table-column
          align="center"
          label="宿舍名">

          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover">
              <el-descriptions :title="scope.row.dormitoryName" border
                               small="mini">
                <el-descriptions-item label="校级表扬次数">
                  <el-tag size="small"> {{ scope.row.dormitorySchoolPrase }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="院级表扬次数">
                  <el-tag size="small"> {{ scope.row.dormitoryCollegePrase }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="累计批评次数">
                  <el-tag size="small"> {{ scope.row.dormitoryCriticizeNum }}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.dormitoryName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="寝室长">
          <template slot-scope="scope">
              <el-popover placement="top" trigger="hover" >
                <el-descriptions size="mini"  border v-for="stu in scope.row.students" :key="stu.studentId">
                    <el-descriptions-item label="姓名" >{{stu.studentName}}</el-descriptions-item>
                    <el-descriptions-item label="手机" >{{stu.studentPhone}}</el-descriptions-item>
                </el-descriptions>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.student !== undefined ? scope.row.student.studentName : '暂无寝室长' }}</el-tag>
                </div>
              </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="宿舍容量"
          prop="dormitoryCapacity">
        </el-table-column>
        <el-table-column
          align="center"
          label="现住人数"
          prop="dormitoryNowPeople">
        </el-table-column>

        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="addCleandialog">添加宿舍</el-button>
      <!--    分页-->
      <el-pagination
        :page-size="limit"
        :total="total"
        background
        hide-on-single-page
        layout="prev, pager, next"
        @prev-click="prevClick"
        @next-click="nextClick"
        @current-change="handleCurrentChange">
      </el-pagination>

      <!--      编辑页面-->
      <el-dialog
        width="650px"
        :visible.sync="dialogVisible"
        :title="title">
        <el-form :model="dormitory"
                 label-position="left"
                 inline
                 label-width="auto">
          <el-form-item label="宿舍名">
            <el-input v-model="dormitory.dormitoryName" placeholder="宿舍名" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="楼号">
            <el-select v-model="dormitory.buildId" placeholder="楼号">
              <el-option :label="d.buildName" :value="d.buildId" v-for="d in builds" :key="d.buildId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="寝室长" v-if="title==='添加'">
            <el-select v-model="dormitory.studentId" placeholder="寝室长">
              <el-option :label="d.studentName" :value="d.studentId" v-for="d in students" :key="d.studentId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="寝室长" v-if="title==='修改'">
            <el-select v-model="dormitory.studentId" placeholder="寝室长">
              <el-option :label="d.studentName" :value="d.studentId" v-for="d in dormitory.students" :key="d.studentId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宿舍容量">
            <el-input v-model="dormitory.dormitoryCapacity" placeholder="宿舍容量" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="校级表扬" v-if="title==='修改'">
            <el-input  v-model="dormitory.dormitorySchoolPrase" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="院级表扬" v-if="title==='修改'">
            <el-input v-model="dormitory.dormitoryCollegePrase" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="通报批评" v-if="title==='修改'">
            <el-input v-model="dormitory.dormitoryCriticizeNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 400px">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editSubmit">{{title}}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!--      成功提示-->
      <el-dialog
        :visible.sync="res">
        <el-result icon="success" subTitle="请根据提示进行操作" title="成功提示">
          <template slot="extra">
            <el-button size="medium" type="primary" @click="res = false">返回</el-button>
          </template>
        </el-result>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import dormitory from '@/utils/dormitory'
import build from '@/utils/build'
import student from '@/utils/student'

export default {
  name: 'Dormitory',
  data () {
    return {
      addVisible: false,
      ids: [],
      debuilds: [],
      students: [],
      builds: [],
      title: '',
      dormitorys: {},
      search: '',
      total: 0,
      loading: true,
      limit: 10,
      dormitory: {
        buildId: '',
        dormitoryName: '',
        studentId: '',
        dormitoryCriticizeNum: '',
        dormitoryCollegePrase: '',
        dormitoryNowPeople: '',
        dormitoryCapacity: '',
        dormitorySchoolPrase: '',
        dormitoryId: '',
        students: [],
        student: {
          studentId: '',
          studentName: ''
        }
      },
      dialogVisible: false,
      res: false
    }
  },
  methods: {
    handleEdit (index, row) {
      this.title = '修改'
      Object.assign(this.dormitory, row)
      this.dialogVisible = true
    },
    editSubmit () {
      this.title === '添加'
        ? dormitory.addDormitory(this.dormitory).then(() => {
          this.$message.success('添加成功!')
          this.dialogVisible = false
          this.res = true
          this.getDormitory(this.dormitorys.current, this.limit, this.search)
        }) : dormitory.editDormitory(this.dormitory).then(() => {
          this.$message.success('修改成功!')
          this.dialogVisible = false
          this.res = true
          this.getDormitory(this.dormitorys.current, this.limit, this.search)
        })
    },
    addCleandialog () {
      this.dormitory = {}
      this.title = '添加'
      this.dialogVisible = true
    },
    alldeBuild () {
      this.ids = []
      this.debuilds.forEach(builde => {
        this.ids.push(builde.dormitoryId)
      })
      dormitory.deleteAllDormitory(this.ids).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getDormitory(this.dormitorys.current, this.limit, this.search)
      })
    },
    changeBox (val) {
      this.debuilds = val
    },
    searchClick () {
      this.getDormitory(1, this.limit, this.search)
    },

    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dormitory.deleteDormitory(row.dormitoryId).then(res => {
          this.getDormitory(this.dormitorys.current, this.limit, this.search)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrentChange (page) {
      this.getDormitory(page, this.limit, this.search)
    },
    prevClick () {
      this.getDormitory(this.dormitorys.current - 1, this.limit, this.search)
    },
    nextClick () {
      this.getDormitory(this.dormitorys.current + 1, this.limit, this.search)
    },
    getDormitory (page, limit, search) {
      dormitory.getDormitory(page, limit, search).then(res => {
        this.dormitorys = res.data
        this.total = parseInt(this.dormitorys.total)
        this.loading = false
      })
    }
  },
  created () {
    this.getDormitory(0, this.limit, this.search)
    build.getBuildALls().then(res => {
      this.builds = res.data
    })
    student.getStudentIds().then(res => {
      this.students = res.data
    })
  }
}
</script>

<style scoped>

</style>
